<template>
  <page-wrap stay-still back hide-tab title="技能特长">
    <view class="evaluation" :style="'margin-bottom:' + inputBottom + 'px;'">
      <view class="evaluation-wrap">
        <!-- <my-textarea
          class="form-text"
          :value.sync="skillText"
          :maxlength="1000"
          placeholder="请详细填写，这有助于用人单位充分了解您"
          auto-height
          show-word-limit
          @board-change="handleBottom"
        ></my-textarea> -->
        <u-input
          class="form-text"
          type="textarea"
          v-model="skillText"
          placeholder="请详细填写，这有助于用人单位充分了解您"
          height="200"
          :auto-height="false"
          maxlength="1000"
          :show-confirmbar='false'
        >
        </u-input>
        <view class="u-text-right">
          <text>{{skillText.length}}/1000</text>
        </view>
      </view>
    </view>
    <view class="page-action">
      <view class="btn-save">
        <u-button type="primary" :custom-style="btnStyle" @click="handleSave"
          >保存</u-button
        >
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { updatePersonDetail, getResumeData } from "@/api/index";
import MyTextarea from "../components/MyTextarea.vue";
import ShareMixin from '@/mixins/share';
export default {
  mixins: [ShareMixin],
  components: {
    MyTextarea,
  },
  data() {
    return {
      inputBottom: 0,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      skillText: null,
      btnSaveStyle: {
        border: "none",
        backgroundColor: "#E9ECEF",
      },
      btnStyle: {
        border: "none",
      },
    };
  },
  watch: {
    inputBottom(val) {
      if (val) {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 99999,
            duration: 0,
          });
        });
      }
    },
  },
  created() {
    this.getResumeData();
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   };
  // },
  methods: {
    handleBottom(e) {
      this.inputBottom = e > 146 ? e - 146 : 0;
    },
    getResumeData() {
      if (
        !getApp().globalData.resumeInfo ||
        !getApp().globalData.resumeInfo.id
      ) {
        let param = {
          personId: this.personId,
          conditionArr: JSON.stringify({
            is_mp: 1
          }),
        };
        getResumeData(param).then((res) => {
          this.skillText = res.otherTc_p;
        });
      } else {
        this.skillText = getApp().globalData.resumeInfo.otherTc_p;
      }
    },
    handleSave() {
      let params = {};
      var updatalist = {};
      updatalist.where = "id='" + this.personId + "'";
      updatalist.personId = this.personId;
      var update = [];
      update.push({
        columnName: "otherTc",
        columnValue: this.skillText,
      });
      updatalist.update = update;
      params.param = JSON.stringify(updatalist);
      updatePersonDetail(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            icon: "none",
            title: "修改成功",
            complete() {
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            },
          });
        } else {
          uni.showToast({ icon: "none", title: res.status_desc });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.evaluation {
  flex-grow: 1;
  padding: 32rpx;

  .evaluation-wrap {
    padding: 32rpx 32rpx 20rpx;
    background-color: $uni-bg-color;
    border-radius: $uni-border-radius-big;
    ::v-deep .form-text {
      display: block;
      width: calc(100vw - 128rpx);
      box-sizing: border-box;
      background-color: #f8f9fb;
        border-radius: $uni-border-radius-big;
      .textarea-input {
        background-color: #f8f9fb;
        border-radius: $uni-border-radius-big;
        textarea, .textarea {
          height: 260rpx !important;
          font-size: $uni-font-size-sm;
        }
        .placeholder {
          font-size: $uni-font-size-sm;
        }
      }
    }
    ::v-deep .textarea {
      background-color: #f8f9fb;
      border-radius: $uni-border-radius-big;
      .u-input {
        background-color: #f8f9fb;
        border-radius: $uni-border-radius-big;
      }
    }
    ::v-deep .u-input__textarea {
      padding: 24rpx 32rpx;
      font-size: $uni-font-size-nor;
    }

    .evaluation-words {
      margin: 20rpx;
      text-align: right;
      color: $uni-text-color-888;
      font-size: $uni-font-size-sm;
    }
  }
}
</style>